<template>
    <div>
        <!-- <h2>{{ info.name }}-{{ info.age }}</h2> -->
        <h2>{{ name }}-{{ age }}</h2>
        <h2>{{ id }}-{{ sex }}</h2>
        <button @click="changeInfo1">修改info</button>
        <button @click="changeInfo2">修改info2</button>
    </div>
</template>

<script>
import { reactive,toRefs,toRef } from "vue";
export default {
    setup() {
        const info = reactive({ name: "why", age: 18 })
        const info2 = reactive({ id: 1, sex: 'male' })
        //响应式解构
        // 1.toRefs: 将reactive对象中的所有属性都转换为ref
        let { name, age } = toRefs(info);   // 解构出来都是ref对象了name:ref age:ref
        // 2.toRef:只希望转换一个reactive对象中的属性,可以使用toRef的方法
        let { id } = info2;   // 不需要转为ref对象
        let  sex  = toRef(info2,"sex");   // 这里就是直接转换为一个ref不需要解构花括号,需要转为ref对象
        

        const changeInfo1 = () => {
            info.name = "lion"  //改变info的值,也会改变解构的name 因为toRefs在state.name和ref.value之间建立链接,任何一个修改都会引起另一变化
            age.value++     //因为是ref类型 所以age.value才能修改  ,在模板中就不需要写age.value,因为自动解包了
        }
        const changeInfo2 = () => {
            id++
            sex.value = "female"
            console.log(id);
        }
        return {
            // info,
            name,
            age,
            sex,
            id,
            changeInfo1,
            changeInfo2
        }
    }
}
</script>

<style lang="scss" scoped>
</style>